<template>
	<view class="container">
		<carHeader :title="'保养导航'">
		</carHeader>
		<!-- 地图框框 -->
		<view class="page-body">
			<view class="map">
				<map 
				style="width: 90%; height: 500px;" 
				:latitude="latitude" :longitude="longitude" 
				:markers="covers" :enable-3D="true" :show-compass="true" >
				</map>
			</view>
			<view class="car-box">
			    <view class="box-header">
			      <text class="box-title">车百事汽车生活馆</text>
			    </view>
			    <view class="box-content">
			      <text class="box-text">山阳区人民路与解放路口交叉口</text>
			    </view>
			  </view>
			  <view class="button">
			  	<button>导航</button>
			  </view>
			  
		</view>
		 
	</view>
</template>

<script>
	export default {
		data() {
			return {
					id:0, // 使用 marker点击事件 需要填写id
					title: 'map',
					latitude: 34.826128,
					longitude: 113.558902,
					covers: [{
					latitude: 34.826128,
					longitude: 113.558902,
					iconPath: '../../../static/location.png'
				},]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.container {
  
}
.slot{
		padding-top: 40rpx;
	}
.page-body {
  width: 90%;
  background-color: white;
  margin-left: 5%;
  margin-top: -180rpx;
}

.map {
  margin-left: 8%;
  padding-top: 8%;
  padding-bottom: 8%;
}
.car-box{
	width: 60%;
	float: left;
	padding-top: 20rpx;
	background-color: white;
	padding-left: 5%;
}

.box-header{
	// background-color: aqua;
	
}
.box-title{
	// background-color: red;
	font-size: 35rpx;
}
.box-content{
	// background-color: bisque;
}
.box-text{
	padding-top: 20rpx;
	// background-color: azure;
	color: #999999;
	font-size: 25rpx;
}
.button{
	width: 180rpx;
	float: right;
	background-color: white;
	padding-left: 23rpx;
	padding-right: 5%;
	button{
		margin-top: 20rpx;
		background-color: #2175F2;
		border-radius: 50rpx;
		color: white;
	}
	
}

</style>